<template>
	<view class="flex-col page">
		<scroll-view scroll-y="true" class="scroll">
			<view class="flex-col group">
				<view class="flex-col group_1">
					<text class="text_1">步骤一 做好设计（图文并茂）</text>
					<text class="text_2">
						作品集简述，本作品集中描述了关于新手装修全攻略，并且展示作品集流程。作品集简述，本作品集中描述了关于新手装修全攻略，并且展示作品集流程。
					</text>
				</view>
				<view class="flex-col group_2">
					<view class="flex-col group_3">
						<view class="justify-center group_4">
							<!-- <view class="flex-col items-center text-wrapper_1" @click="go('/pages/index/works')"><text
									class="text_4">标准版</text></view> -->
							<view class="flex-col items-center text-wrapper_1" @click="goAdvanced"><text
									class="text_4">标准版</text></view>
							<view class="flex-col items-center text-wrapper"><text class="text_3">进阶版</text></view>
						</view>
						<view class="flex-col section_1">
							<text class="text_5">标准版</text>
							<text class="text_6">标准版中无具体描述，只有基础服务内容，详细内容需要在进阶版中查看。</text>
						</view>
					</view>

					<view style="height: 10px; background-color: #f6f7f9;"></view>
					<view class="flex-col group_6" v-if="lists.length>0">
						<view class="flex-row list-item" v-for="(item,index) in lists" :key="index"
							@click="goDetail(item)">
							<image :src='item.strategyItleImage' class="image_3 image_4" />
							<view class="flex-col group_7">
								<text class="text_8" @click="articles(item.strategyId)">{{item.strategyTitle}}</text>
								<view class="justify-between u-col-center">
									<view class="flex-row">
										<!-- 查看数 -->
										<view class="flex-row row">
											<image :src="imgUrl+'16557826815113801323.png'" class="image_5 image_6" />
											<text class="text_9">{{item.strategyLook}}</text>
										</view>
										<!-- 点赞数 -->
										<view class="flex-row row" @click="likeCount(item,index)">
											<image
												:src="item.likeStatus==true ?$IMG_URL+'dzy.png':  $IMG_URL+'16557826815580468287.png'"
												class="image_5 image_7" />
											<text class="text_10">{{item.strategyLike}}</text>
										</view>
										<!-- 收藏数 -->
										<view class="flex-row row" @click="collection(item,index)">
											<image
												:src="item.collectionStatus==true? $IMG_URL+'16557836921572999709.png':$IMG_URL+'16557826699351904721.png' "
												class="image_5 image_8" />
											<text class="text_11">{{item.strategyCollection}}</text>
										</view>
									</view>
									<image :src="imgUrl+'16557826815062483643.png'" class="image_5"
										@click="invitation" />
								</view>
								<shop-share v-model="share"></shop-share>
							</view>
						</view>



					</view>
					<view class="flex-col listnone" v-else>
						<u-empty style="height: 30vh;" width="250" mode="data" textSize="30rpx"
							icon="http://cdn.uviewui.com/uview/empty/order.png">
						</u-empty>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="justify-between section_4" v-if="canBuy">
			<view class="flex-col group_21">
				<!-- <view class="flex-row"> -->
				<view class="group_23">
					<text class="text_222">￥</text>
					<text class="text_233">{{money}}</text>
				</view>
				<!-- </view> -->
				<view class="flex-row">
				</view>
			</view>
			<view class="flex-col text-wrapper" @click="go('/pages/pay/pays?orderid='+money);"><text
					class="text_266">确认付费</text></view>
		</view>
		<shop-check-login></shop-check-login>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				isActive: true,
				collections: '',
				share: false,
				lists: [],
				imgUrl: this.$IMG_URL,
				money: 0,
				canBuy: false,
				likeStatus: '',
				collectionStatus: '',
				strategyId: '',
			};
		},
		onShow() {
			this.storageList = uni.getStorageSync('listArr');
			// this.likeCount();
			// this.collection();
			this.articleList(); //列表
			this.getStrategyMoney();
			console.log('works1,onshow触发啦！');
		},
		async created() {
			this.articleList(); //列表
			this.getStrategyMoney();
			await this.getPayStatus();
		},
		methods: {
			getPayStatus() {
				this.$http('luser.getPayStatus').then(r => {
					if (r.code == 200) {
						this.canBuy = r.data.status ? false : true;
					}
				});
			},
			goDetail(item) {
				console.log(item);
				return;
				if (!this.canBuy) {
					this.go('/pages/introduction/introduction?strategyId=' + item);
				} else {
					this.$u.toast('请购买进阶版,再来查看');
					return;
				}

			},
			// 跳转至进阶版
			goAdvanced() {
				uni.redirectTo({
					url: "/pages/index/works"
				})
			},
			articleList() { //列表  strategyType:'1' 付费类型:0免费 1付费
				this.$http('decorationStrategy.list', {
					strategyType: '1'
				}).then(r => {
					if (r.code == 200) {
						this.lists = r.data
						this.strategyId = r.data.strategyId;
						// this.strategyId = r.data.strategyId
					} else {
						this.$u.toast(r.msg);
					}
				});
			},

			likeCount(item, index) { //装修攻略-文章点赞
				this.$http('decorationStrategy.likeCount', {
					strategyId: item.strategyId, //攻略ID
					strategyStatus: (item.hasOwnProperty('likeStatus') && item.likeStatus == true) ? false : true
				}).then(r => {
					if (r.code == 200) {
						let it = this.lists[index];
						it.strategyLike = r.data.likeCount;
						it.likeStatus = r.data.likeStatus;
						this.$set(this.lists, index, it)
					} else {
						this.$u.toast(r.msg);
					}
				});

				//点赞提示
				if (this.likeStatus) {
					this.$http('decorationStrategy.likeCount', {
						strategyId: item.strategyId, //攻略ID
						strategyStatus: (item.hasOwnProperty('likeStatus') && item.likeStatus == true) ?
							false : true
					}).then(r => {
						this.$u.toast(r.msg);
						if (r.code == 200) {
							this.$u.toast(r.msg);
						} else {
							this.$u.toast(r.msg);

						}
					});
				} else {
					this.$http('decorationStrategy.likeCount', {
						strategyId: item.strategyId, //攻略ID
						strategyStatus: (item.hasOwnProperty('likeStatus') && item.likeStatus == true) ?
							false : true
					}).then(r => {
						if (r.code == 200) {
							this.$u.toast(r.msg);
						} else {
							this.$u.toast(r.msg);
						}
					});
				}


			},

			collection(item, index) { //装修攻略-文章收藏
				this.$http('decorationStrategy.collection', {
					strategyId: item.strategyId, //攻略ID
					collectionStatus: (item.hasOwnProperty('collectionStatus') && item.collectionStatus == 1) ? 0 :
						1 //1收藏 0取消
				}).then(r => {
					if (r.code == 200) {
						console.log(r);
						let it = this.lists[index];
						it.strategyCollection = r.data.collectionCount;
						it.collectionStatus = r.data.collectionStatus;
						this.$set(this.lists, index, it)
					} else {
						this.$u.toast(r.msg);
					}
				});
				//收藏提示
				if (this.collectionStatus) {
					this.$http('decorationStrategy.collection', {
						strategyId: item.strategyId, //攻略ID
						collectionStatus: (item.hasOwnProperty('collectionStatus') && item.collectionStatus ==
							1) ? 0 : 1 //1收藏 0取消
					}).then(r => {
						if (r.code == 200) {
							this.$u.toast(r.msg);
						} else {
							this.$u.toast(r.msg);
						}
					});
				} else {
					this.$http('decorationStrategy.collection', {
						strategyId: item.strategyId, //攻略ID
						collectionStatus: (item.hasOwnProperty('collectionStatus') && item.collectionStatus ==
							1) ? 0 : 1 //1收藏 0取消
					}).then(r => {
						if (r.code == 200) {
							this.$u.toast(r.msg);
						} else {
							this.$u.toast(r.msg);
						}
					});
				}
			},

			getStrategyMoney() { //进阶版 金额
				this.$http('decorationStrategy.getStrategyMoney', {
					status: 0 // 0没付款,1已付款
				}).then(r => {
					if (r.code == 200) {
						this.money = r.data
					} else {
						this.$u.toast(r.msg);
					}
				});

			},
			submits() {
				// this.$http('designOptimize.placeOrder', this.money).then(r => {
				// 	if (r.code == 200) {
				// 		this.money = r.data;
				// 	}else{
				// 		console.log(r.msg)
				// 	}
				// go('/pages/pay/pay?orderid='+r.data);
				// });
			},

			articles(item) { //文章点击事件
				this.go('/pages/introduction/introduction?strategyId=' + item);
			},
			refuse() {
				this.show = true;
			},
			invitation() {
				this.share = true;
			}
		},
	};
</script>

<style scoped lang="scss">
	.active {
		transform: rotate(180deg);
	}

	.group_23 {
		margin-left: 3.5px;
		margin-right: 45px;
		height: 19px;
	}

	.row {
		width: 130rpx;
	}

	.list-item:last-child {
		border-bottom: none;
	}

	.group_21 {
		margin-bottom: 3px;
		margin-top: 10rpx;
	}

	.section_4 {
		padding: 9px 12px;
		background-color: #ffffff;
		box-shadow: 0px -0.5px 0px 0px #00000014;
	}

	.scroll {
		height: calc(100vh - 190rpx);
	}

	.list-item_1 {
		padding: 33rpx 0 32rpx;
		border-bottom: solid 1rpx #eeeeee;
	}

	.image_3 {
		border-radius: 16rpx;
		width: 180rpx;
		height: 180rpx;
	}

	.image_5 {
		width: 32rpx;
		height: 32rpx;
	}

	.text_16 {
		color: #191919;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.page {
		background-color: #ffffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.group {
		padding-bottom: 24rpx;
		flex: 1 1 auto;
		overflow-y: auto;
	}

	.group_1 {
		padding: 31rpx 32rpx 0;
	}

	.group_2 {
		margin-top: 63rpx;
		border-top: solid 1rpx #eeeeee;
	}

	.text_1 {
		align-self: flex-start;
		color: #191919;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		font-weight: 600;
	}

	.text_2 {
		margin-top: 33rpx;
		color: #666666;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 44rpx;
		text-align: left;
	}

	.group_3 {
		padding: 0 32rpx 40rpx;
	}

	.section_2 {
		padding-bottom: 25rpx;
		background-image: linear-gradient(180deg, #1b55d300 0%, #1b55d300 0%, #1b55d317 100%, #1b55d317 100%);
	}

	.group_6 {
		padding: 0 32rpx;
	}

	.group_4 {
		padding: 32rpx 87rpx 20rpx;
	}

	.section_1 {
		padding: 34rpx 24rpx 42rpx;
		background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557826811766179063.png');
		background-position: 0% 0%;
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.section_3 {
		margin: 0 32rpx;
		padding: 17rpx 24rpx 23rpx 32.5rpx;
		background-color: #ffffff;
		box-shadow: 0px -2rpx 12rpx 0px #133e9b14;
		border-radius: 36rpx;
	}

	.list-item {
		padding: 32rpx 0;
		border-bottom: solid 1rpx #eeeeee;
	}

	.text-wrapper {
		margin-left: 30rpx;
		background-color: #1d6aff;
		border-radius: 32rpx;
		width: 240rpx;
		height: 64rpx;
	}

	.text-wrapper_1 {
		margin-left: 0rpx;
		background-color: #f6f7f9;
		border-radius: 32rpx;
		width: 240rpx;
		height: 64rpx;
	}

	.text_5 {
		align-self: flex-start;
		color: #1d6aff;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_6 {
		margin-top: 25rpx;
		color: #666666;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
		text-align: left;
	}

	.image_2 {
		margin-top: 6rpx;
		width: 14rpx;
		height: 26rpx;
	}

	.image_4 {
		flex-shrink: 0;
	}

	.group_7 {
		margin-left: 24rpx;
		flex: 1 1 auto;
	}

	.image_14 {
		margin-top: 148rpx;
	}

	.image_15 {
		flex-shrink: 0;
	}

	.group_21 {
		margin-left: 24rpx;
		flex: 1 1 auto;
	}

	.image_19 {
		margin-left: 12rpx;
		margin-top: 148rpx;
		flex-shrink: 0;
	}

	.image_20 {
		flex-shrink: 0;
	}

	.group_27 {
		margin-left: 24rpx;
		flex: 1 1 auto;
	}

	.text_3 {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #ffffff;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';

	}

	.text_4 {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';

	}

	.image_1 {
		margin-top: 6.5rpx;
		flex-shrink: 0;
		width: 103rpx;
		height: 24.5rpx;
	}

	.text_7 {
		margin-left: 37.5rpx;
		margin-bottom: 3rpx;
		color: #666666;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';

	}

	.text_8 {
		color: #191919;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		/* line-height: 33rpx; */
		text-align: left;
		height: 75px;
	}

	.group_8 {
		/* margin-top: 18rpx; */
	}

	.group_15 {
		margin-left: 24rpx;
	}

	.group_22 {
		margin-top: 115rpx;
	}

	.text_21 {
		text-align: left;
	}

	.text_211 {
		margin: 4.5px 0 1.5px;
		color: #666666;
		font-size: 11px;
		font-family: '.AppleSystemUIFont';
		line-height: 13px;
	}

	.text_255 {
		margin-left: 13px;
		color: #1c4ca8;
		font-size: 11px;
		font-family: '.AppleSystemUIFont';
		line-height: 13px;
	}

	.text_266 {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #ffffff;
		font-size: 12px;
		font-family: '.AppleSystemUIFont';
	}

	.group_28 {
		margin-top: 82rpx;
	}

	.text_12 {
		align-self: flex-start;
		color: #191919;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.group_16 {
		margin-top: 115rpx;
	}

	.group_24 {
		margin-left: 47rpx;
	}

	.group_25 {
		margin-left: 48rpx;
	}

	.group_11 {
		margin-left: 47rpx;
	}

	.group_12 {
		margin-left: 48rpx;
	}

	.group_18 {
		margin-left: 47rpx;
	}

	.group_19 {
		margin-left: 48rpx;
	}

	.image_16 {
		flex-shrink: 0;
	}

	.text_18 {
		margin-left: 8rpx;
		color: #191919;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.image_17 {
		flex-shrink: 0;
	}

	.text_19 {
		margin-left: 8rpx;
		color: #191919;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.image_18 {
		flex-shrink: 0;
	}

	.text_20 {
		margin-left: 8rpx;
		color: #191919;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.group_31 {
		margin-left: 47rpx;
	}

	.group_32 {
		margin-left: 48rpx;
	}

	.image_6 {
		flex-shrink: 0;
	}

	.text_9 {
		margin-left: 8rpx;
		color: #191919;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';

	}

	.image_7 {
		flex-shrink: 0;
	}

	.text_10 {
		margin-left: 8rpx;
		color: #191919;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';

	}

	.image_8 {
		flex-shrink: 0;
	}

	.text_11 {
		margin-left: 8rpx;
		color: #191919;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';

	}

	.image_11 {
		flex-shrink: 0;
	}

	.text_13 {
		margin-left: 8rpx;
		color: #191919;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.image_12 {
		flex-shrink: 0;
	}

	.text_14 {
		margin-left: 8rpx;
		color: #191919;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.image_13 {
		flex-shrink: 0;
	}

	.text_15 {
		margin-left: 8rpx;
		color: #191919;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.image_21 {
		flex-shrink: 0;
	}

	.text_22 {
		margin-left: 8rpx;
		color: #191919;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_222 {
		color: #fe641a;
		font-size: 10px;
		font-family: '.AppleSystemUIFont';
		line-height: 11.5px;
	}

	.image_22 {
		flex-shrink: 0;
	}

	.text_23 {
		margin-left: 8rpx;
		color: #191919;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_233 {
		color: #fe641a;
		font-size: 16px;
		font-family: '.AppleSystemUIFont';
		line-height: 19px;
	}

	.image_23 {
		flex-shrink: 0;
	}

	.text_24 {
		margin-left: 8rpx;
		color: #191919;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_244 {
		color: #999999;
		font-size: 12px;
		font-family: '.AppleSystemUIFont';
		line-height: 14px;
	}
</style>
